<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .m-icon-svg{
      width: 400px;
      height: 400px;
      margin: 0 auto;
      border: dashed 1px #282C34;
      background: #222222;
    }
  </style>
</head>
<body>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    class="m-icon-svg"

    viewBox="0 5 40 40"
    >
    <defs>
      <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#FFC619"/>
        <stop offset="100%" stop-color="#FFF098"/>
      </linearGradient>
    </defs>
    <circle stroke-width="1" stroke="#282C34" fill="none" cx="20" cy="20" r="0.5"></circle>
    <path d="M0,20 40,20zM20,0 20,40z" stroke-width="0.05" stroke=""></path>
    <path id="p" d="M5,20 A16,16,0,0,1,35,20" stroke-linecap="round" stroke-width="0.3" stroke="rgba(255,255,255,0.3)" fill="none"></path>
    <!-- <path id="p" d="M2.5,20 A13,13,0,0,1,37.5,20" stroke-linecap="round" stroke-width="0.3" stroke="url(#linear)" fill="none" stroke-dasharray="0.05 2"></path> -->
    <path id="p" d="M5,20 A16,16,45,0,1,20,9.6" stroke-linecap="round" stroke-width="0.3" stroke="url(#linear)" fill="none" stroke-dasharray="12 23"></path>
    <circle fill="#FFE255" cx="20" cy="9.5" r="0.5" stroke-width="1" stroke="rgba(255,226,85, 0.5)"></circle>
    <circle fill="#FFE255" cx="0" cy="37.24" r="0.5" stroke-width="1" stroke="rgba(255,226,85, 0.5)"></circle>
    <!-- <text style="font-size: 4px;">
      <textPath xlink:href="#p" >1 2 3 4 5 6 7</textPath>
    </text> -->  
  </svg>

</body>
</html>